<template>
	<view class="containerbox bg-white">
		<uv-navbar title="课时充值" auto-back placeholder />
		<scroll-view scrollY class="containerbox">
			<view class="px-30">
				<view class="bb pt-20" style="border-bottom: 1px solid #F0F0F0;">
					<view class="flex items-center justify-between">
						<view class="text-30">课程类型</view>
						<view class="text-28 text-999 flex items-center" @click="godetailEvent">明细 <uv-icon name="arrow-right"></uv-icon></view>
					</view>
					<view class="flex items-center justify-between py-30">
						<view class="box" :class="{actived: formdata.buyType === 2}" @click="formdata.buyType = 2, formdata.amount = formdata.quantity * userconfig.price_thirty">
							<view><text class="text-24">¥ </text><text class="text-40">{{userconfig.price_thirty}}</text></view>
							<view class="text-30 mt-5">30分钟课</view>
						</view>
						<view class="box" :class="{actived: formdata.buyType === 3}" @click="formdata.buyType = 3, formdata.amount = formdata.quantity * userconfig.price_sixty">
							<view><text class="text-24">¥ </text><text class="text-40">{{userconfig.price_sixty}}</text></view>
							<view class="text-30 mt-5">60分钟课</view>
						</view>
					</view>
				</view>
				<view class="bb h-110 flex items-center justify-between" style="border-bottom: 1px solid #F0F0F0;">
					<view class="text-30">充值数量</view>
					<input class="text-30 flex-1 text-right" @input="inputEvent" v-model="formdata.quantity" type="number" placeholder="请输入充值数量" placeholder-class="text-999">
				</view>
				<view class="bb h-110 flex items-center justify-between" style="border-bottom: 1px solid #F0F0F0;">
					<view class="text-30">充值金额</view>
					<input class="text-30 flex-1 text-right" v-model="formdata.amount" type="number" placeholder="（根据充值数量自动计算金额）" disabled placeholder-class="text-999">
				</view>
				<view class="bb h-110 flex items-center justify-between" style="border-bottom: 1px solid #F0F0F0;">
					<view class="text-30">支付方式</view>
					<view class="text-30">微信支付</view>
				</view>
			</view>
		</scroll-view>
		<view class="py-30 px-30 flex items-center justify-between" style="border-top: 1px solid #F0F0F0;">
			<view class="text-red">
				<text class="text-26">合计：¥ </text>
				<text class="text-48">{{formdata.amount || 0}}</text>
			</view>
			<view class="btn bgc-primary" @click="gobuyEvent">立即支付</view>
		</view>
		<uv-popup mode="center" ref="popupRef" bgColor="transparent">
			<view class="relative">
				<image :src="`${$imageBaseUrl}/orderbg.png`" style="width: 600rpx; height: 650rpx;" mode="widthFix"></image>
				<view class="text-center absolute flex flex-col items-center pt-60" style="width: 100%; height: 100%; left: 0; top: 0;">
					<image mode="widthFix" style="width: 354rpx; height: 222rpx;" :src="`${$imageBaseUrl}/orderstatus.png`"></image>
					<view class="text-36 mt-40">充值成功</view>
					<view class="text-30">已充值课时，等待上课吧</view>
					<view class="btn mt-60" @click="backEvent">返回</view>
				</view>
			</view>
		</uv-popup>
	</view>
</template>

<script setup lang="ts">
import { reactive, ref } from 'vue';
import { getRanklist, unreadMessageNumber, userconfig_api, suborder_api, payment_api } from '@/common/apis/other'

const trialDatetimePicker = ref()

const formdata = reactive({
	buyType: 2,
	quantity: 1,
	amount: 0,
	paymentMethod: 3
})

let userconfig = ref({})
let getConfig = async () => {
	userconfig.value = await userconfig_api({'key[0]': 'price_thirty', 'key[1]': 'price_sixty'})
	formdata.amount = 1 * userconfig.value?.price_thirty
}
getConfig()

function inputEvent(e){
	if(e.detail.value){
		console.log(parseInt(e.detail.value))
		formdata.quantity = parseInt(e.detail.value) 
		formdata.amount = parseInt(e.detail.value) * (formdata.buyType === 2 ? userconfig.value.price_thirty : userconfig.value.price_sixty)
	} else{
		formdata.amount = 0
	}
}

function backEvent(){
	uni.navigateBack()
}

function godetailEvent(){
	uni.navigateTo({
		url: '/pages/other/recharge/detail'
	})
}

const popupRef = ref()
async function gobuyEvent(){
	// #ifdef MP-WEIXIN
	uni.login({
		provider: 'weixin', //使用微信登录
		success: async (loginRes) => {
			let res = await suborder_api(formdata)
			let order = await payment_api({
				transactionCodes: [res.code],
				terminal: 2,
				weChatCode: loginRes.code,
				paymentMethod: 3
			})
			uni.requestPayment({
				provider: 'wxpay',
				timeStamp: order.payment.timeStamp,
				nonceStr: order.payment.nonceStr,
				package: order.payment.package,
				signType: order.payment.signType,
				paySign: order.payment.paySign,
				success: (res) => {
					console.log(res)
					popupRef.value.open()
				}
			})
			
		}
	});
	// #endif
	// #ifdef APP
	uni.showToast({
		title: '目前只支持小程序购买'
	})
	// #endif
	
}
</script>

<style lang="scss" scoped>
.btn{height: 96rpx; border-radius: 20rpx; width: 310rpx; text-align: center; line-height: 96rpx; color: #fff; font-size:28rpx}
.box{width: 330rpx; height: 164rpx; background-color: #F8F8F8; border: 1px solid #F8F8F8; border-radius: 20rpx; display: flex; flex-direction: column; align-items: center; justify-content: center;}
.box.actived{background-color: #EDF8FF; border: 1px solid #0B9AFF; color: #0B9AFF;}
</style>